<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>MotionPlusSamplePage</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      padding: 0;
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1rem;
      line-height: 1;
      color: #606c71;
      background-color: #159957;
      background-image: linear-gradient(120deg, #155799, #159957);
      margin-left:0.5% ;
      margin-right:0.5% ;
      width: device-width ;
    }
    .page-header {
      color: #fff;
      text-align: center;
      margin-top: 0rem;
      margin-bottom: 0rem;
      font-weight: normal;
    }
    .page-header h3 {
      height: 2rem;
      padding: 0;
      margin: 1rem;
      border: 0;
    }
    h3 {
      margin-left: 10rem;
    }
    .header-right{
      float: right;
      color: white;
    }
    .header-center {
      text-align: center;
      color: white;
      margin-top: 1rem;
      margin-bottom: 1rem;
    }
    .border {
      border-width: 1rem;
      border-color: white;
      border-style: solid;
    }
    .sidenav {
      height: 100%;
      width: 10rem;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: lightgrey;
      overflow-x: hidden;
      overflow: auto;
    }
    .sidenav a, .dropbtn {
      padding: 0.5rem 0rem 0.5em 1rem;
      text-decoration: none;
      font-size: 1rem;
      display: block;
      border: none;
      background: none;
      width:90%;
      text-align: left;
      cursor: pointer;
      outline: none;
      color: black;
      background-color: lightgray;
    }
    .sidenav a:hover, .dropbtn:hover {
      background-color: #555;
      color: white;
    }
    .sidenav .closebtn {
      color: black;
      top: 0;
      margin-left: 80%;
      width: 1rem;
      font-size: 1rem;
      background-color: lightgray;
    }
    .sidenav .closebtn:hover {
      background-color: lightgray;
      color: white;
    }
    .menubtn {
      top: 0;
      width: 1rem;
      margin-left: 0.5rem;
      margin-bottom: 0.25rem;
      font-size: 1.5rem;
      color:black;
      transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      background-color: transparent;
      border-color: transparent;
    }
    .menubtn:hover {
      color: white;
    }
    .dropdown-content {
      display: none;
      background-color:lightgray;
      padding-left: 1rem;
    }
    .actionbtn {
      padding: 0.25rem;
      text-decoration: none;
      font-size: 0.5rem;
      display: block;
      border: none;
      background: none;
      width: 3rem;
      text-align: center;
      cursor: pointer;
      outline: none;
      color: black;
      background-color: lightgray;
    }
    .cls_config {
      background-color: #000000;
      color: #fff;
      text-align: center;
      margin-top: 0rem;
      margin-bottom: 0rem;
      font-weight: normal;
      font-size: 0.90rem;
    }
    .cls_config table {
      display: table;
      border-spacing: 1rem;
      margin: auto;
    }
    .cls_config label {
      padding: 0rem;
      text-align: right;
      width: 10rem;
      height: 2.5rem;
    }
    .cls_config textarea {
      margin: auto;
      text-align: center;
      width: 15.5rem;
      height: 2.5rem;
    }
    .cls_button {
      width: 10rem;
      height: 2rem;
      padding: 0rem;
    }
    .cls_drop {
      padding: 0rem;
      text-align: right;
      width: 10rem;
      height: 2.25rem;
    }
    .cls_text {
      padding: 0rem;
      width: 10em;
      text-align: right;
    }
    .cls_text_nbr {
      padding: 0rem;
      width: 10rem;
      text-align: right;
    }
    .cls_text_wide {
      padding: 0rem;
      height: 3rem;
      width: 20rem;
      text-align: right;
    }
    .cls_camdrop {
      /* Only used to identify all the cam drops on page */
    }
    .arrow {
      border: solid black;
      border-width: 0 1rem 1rem 0;
      border: double black;
      border-width: 0 0.75rem 0.75rem 0;
      display: inline-block;
      padding: 1rem;
      font-size: 0.5rem;
    }
    .right {
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
    }
    .left {
      transform: rotate(135deg);
      -webkit-transform: rotate(135deg);
    }
    .up {
      transform: rotate(-135deg);
      -webkit-transform: rotate(-135deg);
    }
    .down {
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
    }
    .zoombtn {
      font-size:1.25rem;
      width: 3rem;
      height: 1.5rem;
      margin: 0;
    }
    .cls_movies {
      background-color: transparent;
      color: white;
      text-align: center;
      margin-top: 0rem;
      margin-bottom: 0rem;
      font-weight: normal;
      font-size: 0.90rem;
    }
    a:link {
      color: white;
      background-color: transparent;
      text-decoration: none;
    }
    a:visited {
      color: black;
      background-color: transparent;
      text-decoration: none;
    }
  </style>
</head>

<body class="body" onload="initform()">
  <div id="divnav_main" class="sidenav" style="width: 10rem;">
    <a class="closebtn" onclick="nav_close()">X</a>
    <div id="divnav_version">
      <!-- Filled in by script -->
    </div>
    <button onclick="display_cameras()" id="cam_btn" class="dropbtn">Cameras</button>
    <div id="divnav_cam" class="dropdown-content" style="display: none;">  
    <!-- Filled in by script -->
    </div>
    <button onclick="display_actions()" id="actions_btn" class="dropbtn">Actions</button>
    <div id="divnav_actions" class="dropdown-content" style="display: none;">
    <!-- Filled in by script -->
    </div>
    <button onclick="display_config()" id="cfg_btn" class="dropbtn">
      Configuration
    </button>
    <div id="divnav_config" class="dropdown-content" style="display: block;">
    <!-- Filled in by script -->
    </div>
    <button onclick="display_movies()" id="mov_btn" class="dropbtn">
      Recordings
    </button>
    <div id="divnav_movies" class="dropdown-content" style="display: none;">
    <!-- Filled in by script -->
    </div>
  </div>
  <div id="divmain" style="margin-left: 10rem;">
    <button id="menu_btn" onclick="nav_open();" style="display: none;" class="menubtn">|||</button>
    <p></p>
    <div id="div_cam" style="display: none;">
    <!-- Filled in by script -->
    </div>

    <div id="div_config" style="display: inline;">
    <!-- Filled in by script -->
    </div>

    <div id="div_movies" class="cls_movies" style="display: none;">
      <!-- Filled in by script -->
    </div>

  </div>

  <script>
    var pData, pMovies, pHostFull;
    var gIndxScan, gIndxCam, gGetImgs;
    var pic_url = Array(4);
    var cams_scan_timer, cams_all_timer, cams_one_timer;

    function nav_open() {
      document.getElementById('divnav_main').style.width = '10rem';
      document.getElementById('divmain').style.marginLeft = '10rem';
      document.getElementById('menu_btn').style.display= 'none';
    }

    function nav_close() {
      document.getElementById('divnav_main').style.width = '0rem';
      document.getElementById('divmain').style.marginLeft = '0rem';
      document.getElementById('menu_btn').style.display= 'inline';
    }

    function send_config(category) {
      var formData = new FormData();
      var request = new XMLHttpRequest();
      var xmlhttp = new XMLHttpRequest();
      var camid = document.getElementsByName('camdrop')[0].value;
      var pCfg = pData['configuration']['cam'+camid];

      xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          pData = JSON.parse(this.responseText);
        }
      };
      request.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          xmlhttp.open('GET', pHostFull+'/0/config.json');
          xmlhttp.send();

        }
      };
      formData.append('command', 'config');
      formData.append('camid', camid);

      for (jkey in pCfg) {
        if (document.getElementsByName(jkey)[0] != null) {
          if (pCfg[jkey].category == category) {
            if (document.getElementsByName(jkey)[0].type == 'checkbox') {
              formData.append(jkey, document.getElementsByName(jkey)[0].checked);
            } else {
              formData.append(jkey, document.getElementsByName(jkey)[0].value);
            }
          }
        }
      }
      request.open('POST', pHostFull);
      request.send(formData);

    }

    function send_action(actval) {

      var dsp_cam = document.getElementById('div_cam').style.display;
      if ((dsp_cam == 'none' || dsp_cam == '') && (actval != 'config_write')) {
        return;
      }

      var formData = new FormData();
      var camid;
      var ans;

      camid = assign_camid();

      if (actval == 'action_user') {
        ans = prompt('Enter user parameter');
      } else {
        ans = '';
      }

      formData.append('command', actval);
      formData.append('camid', camid);
      formData.append('user', ans);

      var request = new XMLHttpRequest();
      request.open('POST', pHostFull);
      request.send(formData);

      return;
    }

    function send_reload(actval) {

      var formData = new FormData();
      var request = new XMLHttpRequest();
      var xmlhttp = new XMLHttpRequest();
      var camid;
      var ans;

      camid = assign_camid();

      if (actval == 'camera_delete') {
        ans = confirm('Delete camera ' + camid);
        if (ans == false) {
          return;
        }
      }

      xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          pData = JSON.parse(this.responseText);
          gIndxCam = -1;
          assign_config_nav();
          assign_vals(0);
          assign_cams();
        }
      };
      request.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          xmlhttp.open('GET', pHostFull+'/0/config.json');
          xmlhttp.send();

        }
      };
      formData.append('command', actval);
      formData.append('camid', camid);

      request.open('POST', pHostFull);
      request.send(formData);

    }

    function dropchange_cam(camobj) {
      var indx;

      assign_vals(camobj.value);

      var sect = document.getElementsByName('camdrop');
      for (indx = 0; indx < sect.length; indx++) {
        sect.item(indx).selectedIndex =camobj.selectedIndex;
      }

      gIndxCam = -1;
      for (indx = 0; indx < pData['cameras']['count']; indx++) {
        if (pData['cameras'][indx]['id'] == camobj.value) {
          gIndxCam = indx;
        }
      }

    }

    function config_hideall() {
      var sect = document.getElementsByClassName('cls_config');
      for (var i = 0; i < sect.length; i++) {
        sect.item(i).style.display='none';
      }
      return;
    }

    function config_click(actval) {
      config_hideall();
      document.getElementById('div_cam').style.display='none';
      document.getElementById('div_movies').style.display='none';
      document.getElementById('div_config').style.display='inline';
      document.getElementById('div_' + actval).style.display='inline';
      cams_reset();
    }

    function assign_camid() {
      if (gIndxCam == -1 ) {
        camid = 0;
      } else {
        camid = pData['cameras'][gIndxCam]['id'];
      }

      return camid; 
    }

    function assign_version() {
      var verstr ='<a>MotionPlus \n'+pData['version'] +'</a>';
      document.getElementById('divnav_version').innerHTML = verstr;
    }

    function assign_cams() {
      var camcnt = pData['cameras']['count'];
      var indx = 0;
      var html_drop = "\n";
      var html_nav = "\n";
      var html_mov = "\n";

      html_drop += " <select class='cls_drop' ";
      html_drop += " onchange='dropchange_cam(this)' ";
      html_drop += " name='camdrop'>\n";

      for (indx=0; indx<camcnt; indx++) {
        if (indx == 0) {
          html_nav += "<a onclick='cams_all_click();'>";
          html_nav += "All Cameras</a>\n";
          html_nav += "<a onclick='cams_scan_click();'>";
          html_nav += "Scan Cameras</a>\n";

          html_drop += "<option ";
          html_drop += " value='0'>default";
          html_drop += "</option>\n";
        }

        html_nav += "<a onclick='cams_one_click(" + indx + ");'>";
        html_nav += pData["cameras"][indx]["name"] + "</a>\n";
        html_mov += "<a onclick='movies_click(" + indx + ");'>";
        html_mov += pData["cameras"][indx]["name"] + "</a>";
        html_drop += "<option ";
        html_drop += " value='"+pData["cameras"][indx]["id"]+"'>";
        html_drop += pData["cameras"][indx]["name"];
        html_drop += "</option>\n";
      }
      html_drop += " </select>\n";

      var sect = document.getElementsByClassName("cls_camdrop");
      for (indx = 0; indx < sect.length; indx++) {
        sect.item(indx).innerHTML = html_drop;
      }

      document.getElementById("divnav_cam").innerHTML = html_nav;

      document.getElementById("divnav_movies").innerHTML = html_mov;

      return;
    }

    function assign_actions() {
      var html_actions = "\n";
      html_actions += "  ";
      document.getElementById("divnav_actions").innerHTML = html_actions;

      return;
    }

    function assign_vals(camid) {
      var pCfg;

     if (camid == 0) {
       pCfg = pData["configuration"]["default"];
     } else {
       pCfg = pData["configuration"]["cam"+camid];
     }

      for (jkey in pCfg) {
        if (document.getElementsByName(jkey)[0] != null) {
          if (pCfg[jkey].enabled) {
            document.getElementsByName(jkey)[0].disabled = false;
            if (document.getElementsByName(jkey)[0].type == "checkbox") {
              document.getElementsByName(jkey)[0].checked = pCfg[jkey].value;
            } else {
              document.getElementsByName(jkey)[0].value = pCfg[jkey].value;
            }
          } else {
            document.getElementsByName(jkey)[0].disabled = true;
            document.getElementsByName(jkey)[0].value = '';
          }
        } else {
          console.log('Uncoded ' + jkey + ' : ' + pCfg[jkey].value);
        }
      }
    }

    function assign_config_nav() {
      var pCfg = pData['configuration']['default'];
      var pCat = pData['categories'];
      var html_nav = "\n";

      for (jcat in pCat) {
        html_nav += "<a onclick=\"config_click('";
        html_nav += pCat[jcat]["name"]+"');\">";
        html_nav += pCat[jcat]["display"]+"</a>\n";

      }

      document.getElementById("divnav_config").innerHTML = html_nav;

    }

    function assign_config_item(jkey) {
      var pCfg = pData['configuration']['default'];
      var html_cfg = "";
      var indx_lst = 0;

      html_cfg += "<tr><td><label for='";
      html_cfg += jkey + "'>"+jkey+"</label></td>\n";

      if (pCfg[jkey]["type"] == "string") {
        html_cfg += "<td><textarea name='";
        html_cfg += jkey+"'></textarea></td>";

      } else if (pCfg[jkey]["type"] == "bool") {
        html_cfg += "<td><input class='cfg_check' ";
        html_cfg += " type='checkbox' name='";
        html_cfg += jkey+"'></td>";

      } else if (pCfg[jkey]["type"] == "int") {
        html_cfg += "<td><input class='cls_text_nbr' ";
        html_cfg += "type='text' name='";
        html_cfg += jkey+"'></td>";

      } else if (pCfg[jkey]["type"] == "list") {
        html_cfg += "<td><select class='cls_drop' ";
        html_cfg += " name='"+jkey+"'  autocomplete='off'>";

        for (indx_lst=0; indx_lst < pCfg[jkey]["list"].length; indx_lst++) {
          html_cfg += "<option value='";
          html_cfg += pCfg[jkey]["list"][indx_lst] + "'>";
          html_cfg += pCfg[jkey]["list"][indx_lst] + "</option>\n";
        }
        html_cfg += "</select></td>";
      }
      html_cfg += "</tr>\n";

      return html_cfg;

    }

    function assign_config_cat(jcat) {
      var pCfg = pData['configuration']['default'];
      var pCat = pData['categories'];
      var html_cfg = "";

      html_cfg += "<div id='div_";
      html_cfg += pCat[jcat]["name"];
      html_cfg += "' style='display:none' class='cls_config'>\n";
      html_cfg += "<h3>";
      html_cfg += pCat[jcat]["display"];
      html_cfg += " Parameters</h3>\n";
      html_cfg += "<table><tr> <td><label for 'camdrop'>camera</label></td>\n";
      html_cfg += "<td class='cls_camdrop'>";
      html_cfg += "<select class='cls_drop' ";
      html_cfg += "onchange='dropchange_cam.call(this)' ";
      html_cfg += "name='camdrop'>\n";
      html_cfg += "<option value='0000'>default</option>\n";
      html_cfg += "</select></td></tr>\n";

      for (jkey in pCfg) {
        if (pCfg[jkey]["category"] == jcat) {
          html_cfg += assign_config_item(jkey); 
        }
      }
      html_cfg += "<tr><td><input type='hidden' name='trailer' value='null'></td>\n";
      html_cfg += "<td> <button onclick='send_config(";
      html_cfg += jcat + ")'>Submit</button></td></tr>\n";
      html_cfg += "</table></div>\n";

      return html_cfg;

    }

    function assign_config() {
      var pCat = pData['categories'];
      var html_cfg = "";

      assign_config_nav();

      for (jcat in pCat) {
        html_cfg += assign_config_cat(jcat);
      }

      document.getElementById("div_config").innerHTML = html_cfg;

    }

    function initform() {
      var xmlhttp = new XMLHttpRequest();

      pHostFull = '//' + window.location.hostname;
      pHostFull = pHostFull + ':' + window.location.port;

      xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          pData = JSON.parse(this.responseText);
          gIndxCam  = -1;
          gGetImgs  = 1;
          gIndxScan = -1;

          assign_config();
          assign_version();
          assign_vals(0);
          assign_cams();
          assign_actions();
          cams_all_click();
          nav_close();
        }
      };
      xmlhttp.open('GET', pHostFull+'/0/config.json');
      xmlhttp.send();
    }

    function display_cameras() {
      document.getElementById('divnav_config').style.display = 'none';
      document.getElementById('divnav_actions').style.display = 'none';
      document.getElementById('divnav_movies').style.display = 'none';
      if (document.getElementById('divnav_cam').style.display == 'block'){
        document.getElementById('divnav_cam').style.display = 'none';
      } else {
        document.getElementById('divnav_cam').style.display = 'block';
      }
    }

    function display_config() {
      document.getElementById('divnav_cam').style.display = 'none';
      document.getElementById('divnav_actions').style.display = 'none';
      document.getElementById('divnav_movies').style.display = 'none';
      if (document.getElementById('divnav_config').style.display == 'block') {
        document.getElementById('divnav_config').style.display = 'none';
      } else {
        document.getElementById('divnav_config').style.display = 'block';
      }
      gIndxScan = -1; 
      cams_timer_stop();
    }

    function display_movies() {
      document.getElementById('divnav_cam').style.display = 'none';
      document.getElementById('divnav_actions').style.display = 'none';
      document.getElementById('divnav_config').style.display = 'none';
      if (document.getElementById('divnav_movies').style.display == 'block') {
        document.getElementById('divnav_movies').style.display = 'none';
      } else {
        document.getElementById('divnav_movies').style.display = 'block';
      }
      gIndxScan = -1; 
      cams_timer_stop();
    }

    function display_actions() {
      document.getElementById('divnav_cam').style.display = 'none';
      document.getElementById('divnav_config').style.display = 'none';
     if (document.getElementById('divnav_actions').style.display == 'block') {
        document.getElementById('divnav_actions').style.display = 'none';
      } else {
        document.getElementById('divnav_actions').style.display = 'block';
      }
      gIndxScan = -1; 
    }

    function camera_buttons_ptz() {

      var html_preview = "";
      html_preview += "<table style='float: left' >";
      html_preview += "<tr><td>&nbsp&nbsp</td><td>&nbsp&nbsp</td></tr>\n";
      html_preview += "<tr><td></td><td><button \n";
      html_preview += "onclick=\"send_action('tilt_up');\" \n";
      html_preview += "class=\"arrow up\" \n";
      html_preview += "></button></td></tr> \n";
      html_preview += "<tr><td><button \n";
      html_preview += "onclick=\"send_action('pan_left');\" \n";
      html_preview += "class=\"arrow left\" \n";
      html_preview += "></button></td><td></td> \n";
      html_preview += "<td><button \n";
      html_preview += "onclick=\"send_action('pan_right');\" \n";
      html_preview += "class=\"arrow right\" \n";
      html_preview += "></button></td><td>&nbsp&nbsp</td> \n";
      html_preview += "<td>&nbsp</td><td><button \n";
      html_preview += "onclick=\"send_action('zoom_in');\" \n";
      html_preview += "class=\"zoombtn\" \n";
      html_preview += ">+</button></td> \n";
      html_preview += "<td>&nbsp</td><td><button \n";
      html_preview += "onclick=\"send_action('zoom_out');\" \n";
      html_preview += "class=\"zoombtn\" \n";
      html_preview += ">-</button></td></tr> \n";
      html_preview += "<tr><td></td><td><button \n";
      html_preview += "onclick=\"send_action('tilt_down');\" \n";
      html_preview += "class=\"arrow down\" \n";
      html_preview += "></button></td></tr> \n";
      html_preview += "<tr><td>&nbsp&nbsp</td><td>&nbsp&nbsp</td></tr>\n";
      html_preview += "</table><p></p>";
      return html_preview;

    }

    function image_pantilt() {

      if (gIndxCam == -1 ) {
        return;
      }

      document.getElementById('pic'+ gIndxCam).addEventListener('click',function(event){
        bounds=this.getBoundingClientRect();
        var x = Math.floor(event.pageX - bounds.left - window.scrollX);
        var y = Math.floor(event.pageY - bounds.top - window.scrollY);
        var w = Math.floor(bounds.width);
        var h = Math.floor(bounds.height);
        var qtr_x = Math.floor(bounds.width/4);
        var qtr_y = Math.floor(bounds.height/4);
        if ((x > qtr_x) && (x < (w - qtr_x)) && (y < qtr_y)) {
          send_action('tilt_up');
        } else if ((x > qtr_x) && (x < (w - qtr_x)) && (y >(h - qtr_y))) {
          send_action('tilt_down');
        } else if ((x < qtr_x) && (y > qtr_y) && (y < (h - qtr_y))) {
           send_action('pan_left');
        } else if ((x >(w - qtr_x)) && (y > qtr_y) && (y < (h - qtr_y))) {
           send_action('pan_right');
        }
      });
    }

    function cams_timer_stop() {
      clearInterval(cams_one_timer);
      clearInterval(cams_all_timer);
      clearInterval(cams_scan_timer);
    }

    function cams_reset() {
      var indx, camcnt;
      camcnt = pData['cameras']['count'];
      for (indx=0; indx<camcnt; indx++) {
        if (document.getElementById('pic'+indx) != null) { 
          document.getElementById('pic'+indx).src = ''; 
        }
      }
    } 

    function cams_all_click() {

      var html_preview = "";
      var indx;
      var camid;

      config_hideall();
      cams_timer_stop();
      gIndxCam = -1;
      gIndxScan = -1; 

      var camcnt = pData['cameras']['count'];
      html_preview += "</table>";
      for (indx=0; indx<camcnt; indx++) {
        camid = pData['cameras'][indx].id;
        if (pData['configuration']['cam'+camid].stream_preview_method.value == 'static') {
          html_preview += "<a><img id='pic" + indx + "' src="
          html_preview += pData['cameras'][indx]['url'];
          html_preview += "static/stream/t" + new Date().getTime();
          html_preview += " onclick='cams_one_click(" + indx + ")' ";
          html_preview += " border=0 width=";
          html_preview += pData['configuration']['cam'+camid].stream_preview_scale.value;
          html_preview += "%></a>\n";
          if (pData['configuration']['cam'+camid].stream_preview_newline.value == true) {
            html_preview += "<br>\n";
          }
        } else { 
          html_preview += "<a><img id='pic" + indx + "' src="
          html_preview += pData['cameras'][indx]['url'];
          html_preview += "mjpg/stream" ;
          html_preview += " onclick='cams_one_click(" + indx + ")' ";
          html_preview += " border=0 width=";
          html_preview += pData['configuration']['cam'+camid].stream_preview_scale.value;
          html_preview += "%></a>\n";
          if (pData['configuration']['cam'+camid].stream_preview_newline.value == true) {
            html_preview += "<br>\n";
          }
        } 
      }
      document.getElementById('div_config').style.display='none';
      document.getElementById('div_movies').style.display = 'none';
      cams_reset();
      document.getElementById('div_cam').style.display='block';
      document.getElementById('div_cam').innerHTML = html_preview;
      cams_all_timer = setInterval(cams_all_fnc, 2000);

  }

    function cams_one_click(index_cam) {

      var html_preview = "";
      var camid;

      config_hideall();
      cams_timer_stop();
      gIndxCam = index_cam;

      gIndxScan = -1; 

      if (gIndxCam == -1 ) {
        return;
      }

      camid = pData['cameras'][index_cam].id;
      if ((pData['configuration']['cam'+camid].stream_preview_ptz.value == true)) {
        html_preview += camera_buttons_ptz();
      }

      if (pData['configuration']['cam'+camid].stream_preview_method.value == 'static') {
        html_preview += "<a><img id='pic" + gIndxCam + "' src=";
        html_preview += pData['cameras'][gIndxCam]['url'];
        html_preview += "static/stream/t" + new Date().getTime();
        html_preview += " border=0 width=95%></a>\n";
      } else { 
        html_preview += "<a><img id='pic" + gIndxCam + "' src=";
        html_preview += pData['cameras'][gIndxCam]['url'];
        html_preview += "mjpg/stream" ;
        html_preview += " border=0 width=95%></a>\n";
      }
      document.getElementById('div_config').style.display='none';
      document.getElementById('div_movies').style.display = 'none';
      cams_reset();
      document.getElementById('div_cam').style.display='block';
      document.getElementById('div_cam').innerHTML = html_preview;

      image_pantilt();

      cams_one_timer = setInterval(cams_one_fnc, 1000);

    }

    function cams_scan_click() {

      cams_timer_stop();

      gIndxCam = -1; 
      gIndxScan = 0; 

      cams_scan_timer = setInterval(cams_scan_fnc, 5);
    }

    function cams_one_fnc () {
      var img = new Image();
      var camid;

      if (gIndxCam == -1 ) {
        return;
      }

      camid = pData['cameras'][gIndxCam]['id'];

      if (pData['configuration']['cam'+camid].stream_preview_method.value == 'static') {
        pic_url[0] = pData['cameras'][gIndxCam]['url'] + "static/stream/t" + new Date().getTime();
        img.src = pic_url[0];
        document.getElementById('pic'+gIndxCam).src = pic_url[0];
      }
    }

     function cams_img_onload(camindx, indx) {
      document.getElementById('pic'+camindx).src = pic_url[indx];
      pic_url[indx] = '';
    }

    function cams_all_fnc () {
      if (gGetImgs == 1) {
        gGetImgs = 0;
        var camcnt = pData['cameras']['count'];
        var camindx = 0;
        var indx;
        var img   = new Array(4);
        var maxchk = 1;
        for (indx = 0; indx <= 3; indx++) {
          pic_url[indx] = '';
          img[indx] = new Image();
        }
        while ((camindx < camcnt) && (maxchk < 10)) {
          maxchk++;
          camid = pData['cameras'][camindx]['id'];
          if (pData['configuration']['cam'+camid].stream_preview_method.value == 'static') {
            for (indx = 0; indx <= 3; indx++) {
               if ((pic_url[indx] == '') && (camindx < camcnt)) {
                 pic_url[indx] = pData['cameras'][camindx]['url'] + "static/stream/t" + new Date().getTime();
                 img[indx].onload = cams_img_onload(camindx, indx);
                 img[indx].src = pic_url[indx];
                 camindx++;
               }
            }
          } else {
            camindx++;
          }
        }
        gGetImgs = 1;
      }
    }

    function cams_scan_fnc() {
      var html_preview = "";
      var camid;
      var camcnt = pData['cameras']['count'];

      cams_reset();
      if(gIndxScan == -1) {
        clearInterval(cams_scan_timer);
        return;
      }

      if(gIndxScan == (camcnt-1)) {
        gIndxScan = 0;
      } else { 
        gIndxScan++;
      }

      camid = pData['cameras'][gIndxScan]['id'];
      clearInterval(cams_scan_timer);
      cams_scan_timer = setInterval(cams_scan_fnc,
        pData['configuration']['cam'+camid].stream_scan_time.value * 1000 
      );
      html_preview += "<a><img id='pic0' src="
      html_preview += pData['cameras'][gIndxScan]['url'];
      html_preview += "mjpg/stream" ;
      html_preview += " onclick='cams_one_click(" + gIndxScan + ")' ";
      html_preview += " border=0 width=";
      html_preview += pData['configuration']['cam'+camid].stream_scan_scale.value;
      html_preview += "%></a>\n";
      document.getElementById('div_config').style.display='none';
      document.getElementById('div_movies').style.display='none';
      cams_reset();
      document.getElementById('div_cam').style.display='block';
      document.getElementById('div_cam').innerHTML = html_preview;
    };

    function movies_page() {

      var html_tab = "<div>";
      var indx, movcnt, camid, uri;
      var fname,fsize,fdate;

      if (gIndxCam == -1 ) {
        return;
      }

      camid = assign_camid();
      uri = pHostFull+'/'+camid+'/movies/';

      movcnt = pMovies['movies'][gIndxCam].count;
      html_tab +="<table style='color:white;' >";
      html_tab +="  <colgroup width='20%'></colgroup>";
      html_tab +="  <colgroup width='2%'></colgroup>";
      html_tab +="  <colgroup width='2%'></colgroup>";
      html_tab +="  <colgroup width='2%'></colgroup>";
      html_tab +="  <colgroup width='2%'></colgroup>";
      html_tab +="  <colgroup width='2%'></colgroup>";
      html_tab +="  <colgroup width='2%'></colgroup>";
      html_tab +="  <colgroup width='2%'></colgroup>";
      html_tab +="  <colgroup width='2%'></colgroup>";
      html_tab +="  <tr>";
      html_tab +="    <td align='left'><b>Name</b></td>";
      html_tab +="    <td align='left'><b>Size</b></td>";
      html_tab +="    <td align='left'><b>Date</b></td>";
      html_tab +="    <td align='left'><b>time</b></td>";
      html_tab +="    <td align='left'><b>diff_avg</b></td>";
      html_tab +="    <td align='left'><b>sdev_min</b></td>";
      html_tab +="    <td align='left'><b>sdev_max</b></td>";
      html_tab +="    <td align='left'><b>sdev_avg</b></td>";
      html_tab +="    <td align='left'><b></b></td>";
      html_tab +="  </tr>";

      for (indx = 0; indx < movcnt; indx++) {
        fname = pMovies['movies'][gIndxCam][indx]['name'];
        fsize = pMovies['movies'][gIndxCam][indx]['size'];
        fdate = pMovies['movies'][gIndxCam][indx]['date'];

        ftime = pMovies['movies'][gIndxCam][indx]['time'];

        fdavg = pMovies['movies'][gIndxCam][indx]['diff_avg'];

        fsmin = pMovies['movies'][gIndxCam][indx]['sdev_min'];

        fsmax = pMovies['movies'][gIndxCam][indx]['sdev_max'];

        fsavg = pMovies['movies'][gIndxCam][indx]['sdev_avg'];

        html_tab +="<tr>";
        html_tab +="  <td align='left'><a href='"
        html_tab += uri + fname + "'>" + fname + "</a></td>";
        html_tab +="  <td align='center'>"+fsize+"</td>";
        html_tab +="  <td align='center'>"+fdate+"</td>";
        html_tab +="  <td align='center'>"+ftime+"</td>";
        html_tab +="  <td align='center'>"+fdavg+"</td>";
        html_tab +="  <td align='center'>"+fsmin+"</td>";
        html_tab +="  <td align='center'>"+fsmax+"</td>";
        html_tab +="  <td align='center'>"+fsavg+"</td>";
        html_tab +="  <td align='center'> </td>";
        html_tab +="</tr>";
      }
      html_tab +="</table>";
      html_tab +="</div>";

      document.getElementById('div_config').style.display='none';
      document.getElementById('div_cam').style.display='none';
      cams_reset();
      document.getElementById('div_movies').style.display='block';
      document.getElementById('div_movies').innerHTML = html_tab;

    }

    function movies_click(index_cam) {
      var camid, indx, camcnt, uri;

      if (gIndxCam == -1 ) {
        return;
      }

      gIndxCam = index_cam;
      gIndxScan = -1; 
      camid = assign_camid();
      uri = pHostFull+'/'+camid+'/movies.json';

      config_hideall();
      cams_reset();
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          pMovies = JSON.parse(this.responseText);
          movies_page();
        }
      };
      xmlhttp.open('GET', uri);
      xmlhttp.send();
    }

  </script>



</body></html>